import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useCallback } from 'react'
import ClothesCard from '../../components/clothes-card/index'
import FloatBtn from '../../components/float-btn/index'
import { categoryList } from './clothes-data'
import './index.less'
import ClothesSquare from './clothes-square'
import TitleBar from '../../components/title-bar'

function Wardrobe() {
  const titleBarRef = useCallback(v => { setCurrent(v?.current ?? 0) }, [])

  const [current, setCurrent] = useState(0)

  function addClothes() {
    Taro.navigateTo({
      url: '/pages/add-clothes/index'
    })
  }

  function handleClick({ text, val }) {
    Taro.navigateTo({
      url: `/pages/wardrobe/show-clothes/index?val=${val}&text=${text}`
    })
  }

  return (
    <View className='wardrobe'>
      <TitleBar ref={titleBarRef} titles={[{ title: '我的衣橱' }, { title: '衣橱广场' }]} />
      {
        current == 0 ?
          <>
            <View className='card-wrap'>
              {
                categoryList.map((v, k) => {
                  return <ClothesCard title={v.text} key={k} onClick={() => handleClick(v)} />
                })
              }
            </View>
            <FloatBtn icon='add' onClick={addClothes} />
          </> :
          <ClothesSquare />
      }
    </View >
  )
}

export default Wardrobe
